<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>发帖</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
		<script src="js/zepto.js"></script>
		<script type="text/javascript" src="js/touch.js"></script>
		<style type="text/css">
			
			#comment{
				width: 100%;
				height: 2rem;
				border-top: 1px solid #AFAFAF;
				border-bottom: 1px solid #AFAFAF;
				position: relative;
	
			}
			#comment .in_tex{
				width: 94%;
				height: 1rem;
				position: absolute;
				left: .1rem;
				top: .1rem;
				border: none;
				outline: none;
			}
			.conpic{
				width: .7rem;
				height: .7rem;
				position: absolute;
				left: .1rem;
				bottom: .1rem;
				
				background: url(img/z_add.png) center center no-repeat;
				background-size: 100% 100%;
			}
			.conpic input::-webkit-file-upload-button {
				width: .4rem;
				height: .4rem;
				border: none;
				position: absolute;
				outline: 0;
				opacity: 0;
			}
			#filechooser{
				display: block;
				width: auto;
				border: 0;
				vertical-align: middle;
				background-color: darkgoldenrod;
			}
			.piclook{
				width: .8rem;
				height: .8rem;
				
				background-color: #F0F0F0;
				position: absolute;
				left: 10px;
				top: 1.1rem;
				overflow: hidden;
				z-index: 10;
			
				display: none;
 				vertical-align:middle;
 				font-size: 0;
    			text-align: center;
    			line-height: .8rem;
			}
			.piclook img{
				width: 100%;
				
				
				vertical-align:middle;
			}
			#sub{
				width: .4rem;
				height: .3rem;
				line-height: .3rem;
				text-align: center;
				/*position: absolute;
				right: .1rem;
				top:.1rem;*/
				border: 1px solid #F0F0F0;
				border-radius: .05rem;
				font-size: .1rem;
			}
			#texta{
				resize:none
			}
			.sanjiao_pic1{
				width: .2rem;
				height: .2rem;
				font-size: .2rem;
				line-height: .15rem;
				text-align: center;
				color: #AFAFAF;
				border: 1px solid #AFAFAF;
				border-radius: 50%;
				position: absolute;
				top:1rem;
				left:.8rem;
				z-index: 1000;
				display: none;
				
			}
			#caozuo{
				width: .7rem;
				height: .3rem;
				font-size:.13rem;
				text-align: center;
				letter-spacing: .03rem;
				line-height: .28rem;
				border: 1px solid black;
				border-radius: .1rem;
				background-color: black;
				color: white;
				margin-top: .08rem;
				margin-left: 78%;
			}
			.inhidden{
				display: none;
			}
			.dagou{
				width: 100vw;
				height: 100vh;
				background: url(img/dabg.png)no-repeat;
				background-size: 100% 100%;
				position: fixed;
				top: 0rem;
			
				text-align: center;
				display: none;
			}
			.dagou img{
				width: 22%;
				position: absolute;
				top: 1.8rem;
			}
			.bazhang{
				width: 100vw;
				height: 100vh;
				background: url(img/bazhangbg.png)no-repeat;
				background-size: 100% 100%;
				position: fixed;
				top: 0rem;
				text-align: center;
				display: none;
			}
			.bazhang img{
				width: 35%;
				position: absolute;
				top: 2.3rem;
				left: 1.2rem;
			}
		</style>
	</head>
	<body>
		
		
		
		<div id="comment">
			<div id="piclook" class="piclook">
				
			</div>
			<div id="sanjiao_pic1" class="sanjiao_pic1">x</div>
			<form id="ping_int" action="http://test.onetuu.com/Valentines/addMom" method="post" enctype="multipart/form-data">
				<textarea class="in_tex" type="text" name="content" id="texta" value="" placeholder="说点什么吧..."></textarea>
				<div class="conpic">
						<input id="filechooser" type="file" accept="image/*" name="pic"/>
				</div>
				<input type="text" name="userid" class="inhidden" value="10" />
				<input type="text" name="type" class="inhidden" id="Ty" value="" />
			</form>
			
		</div>
		<div id="caozuo">
				发送
		</div>
		<div class="dagou">
			<img src="img/da.png"/>
		</div>
		<div class="bazhang">
			<img src="img/bazhang.png"/>
		</div>
	</body>
	<script type="text/javascript" src="js/exif.js"></script>	
	<script type="text/javascript">
		
		
		var userid = document.URL.split("?")[1].split("&")[0].split("=")[1];
		var Type = document.URL.split("?")[1].split("&")[1].split("=")[1];
		$("#Ty").val(Type);
	
		$('input[type="text"],textarea').on('focus', function () {
		  	var target = this;
		    setTimeout(function(){
		        target.scrollIntoViewIfNeeded();
		        console.log('scrollIntoViewIfNeeded');
		    },200);
		});
		$('input[type="text"],textarea').on('blur', function () {
//			setTimeout(function(){
		        //$("#comment").css({display:"none"});
//		    },200);
		});
		$("#sanjiao_pic1").on("touchend",function(){
					$("#piclook").empty();
					$("#piclook").hide();
					$("#sanjiao_pic1").hide();
		});
		$("#caozuo").on("touchend",function(){
			if($("#piclook").css("display") =="none"){
				alert("选一张图片吧！");
			}else if($("#texta").val() ==""){
				alert("写点文字吧~~~");
			}else{
				if(Type == 1){
					$(".dagou").show();
					$(".dagou img").css("animation","tada 1s linear infinite");
					setTimeout(function(){
						$('#ping_int').submit();
					},2000);
				}else if(Type == 2){
					$(".bazhang").show();
					$(".bazhang img").css("animation","pulse .5s linear infinite");
					setTimeout(function(){
						$('#ping_int').submit();
					},2000);
				}
				
			}
		})
	
		
		
		//图
		var filechooser = document.getElementById("filechooser");
		var piclook = document.getElementById("piclook");
//		$("#piclook").hide();
		var sanjiao_pic = document.getElementById("sanjiao_pic");
			var fo = $("#tuwem_0");
			filechooser.onchange = function() {
				$(".piclook").css({display:"table-cell"});
				$(".sanjiao_pic1").css({display:"block"});
				//if($(".z_addImg").length == 6){ return };
				
				var file = this.files[0];
				var orientation;
				
				if(/\/(?:gif|GIF)/i.test(file.type)){
					
					xoupxx(file);
				}else{
					EXIF.getData(file, function() {
						orientation = EXIF.getTag(this, 'Orientation');
					});
					var reader = new FileReader();
					reader.onload = function(e) {
						
						getImgData(this.result, orientation, function(data) {
							//这里可以使用校正后的图片data了
						});
					}
					
					reader.readAsDataURL(file);
				}	
			}
	
			function xoupxx(file){
				var reader = new FileReader(); //HTML5定义了FileReader作为文件API的重要成员用于读取文件
				reader.onload = function() {
					var result = this.result;  //result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
					var img = new Image();
					
						toPreviewer(result);
	
						return;
	
				};	
				reader.readAsDataURL(file);
			}	
			
			function toPreviewer(dataUrl) {
								
				var op="";
				var img = new Image();
				op = dataUrl;
				fo.append('<input class="remo" type="hidden" name="imgPic" value="'+op+'">');
				img.src = op;
				//var ddiv = $("<div class='z_addImg'><div class='mm'></div></div>");
				piclook.append(img);
				$("#piclook").show();
				$("#sanjiao_pic1").css("display","block");
				//$('.z_photo').append(ddiv);
	
			}

			// @param {string} img 图片的base64
			// @param {int} dir exif获取的方向信息
			// @param {function} next 回调方法，返回校正方向后的base64
			function getImgData(img, dir, next) {
				var image = new Image();
				image.onload = function() {
					
					var degree = 0,
						drawWidth, drawHeight, width, height;
					drawWidth = this.naturalWidth;
					drawHeight = this.naturalHeight;
					//以下改变一下图片大小
					var maxSide = Math.max(drawWidth, drawHeight);
					if(maxSide > 1024) {
						var minSide = Math.min(drawWidth, drawHeight);
						minSide = minSide / maxSide * 1024;
						maxSide = 1024;
						if(drawWidth > drawHeight) {
							drawWidth = maxSide;
							drawHeight = minSide;
						} else {
							drawWidth = minSide;
							drawHeight = maxSide;
						}
					}
					var canvas = document.createElement('canvas');
					canvas.width = width = drawWidth;
					canvas.height = height = drawHeight;
					var context = canvas.getContext('2d');
					//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
					switch(dir) {
						//iphone横屏拍摄，此时home键在左侧
						case 3:
							degree = 180;
							drawWidth = -width;
							drawHeight = -height;
							break;
							//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
						case 6:
							canvas.width = height;
							canvas.height = width;
							degree = 90;
							drawWidth = width;
							drawHeight = -height;
							break;
							//iphone竖屏拍摄，此时home键在上方
						case 8:
							canvas.width = height;
							canvas.height = width;
							degree = 270;
							drawWidth = -width;
							drawHeight = height;
							break;
					};
					//使用canvas旋转校正
					context.rotate(degree * Math.PI / 180);
					context.drawImage(this, 0, 0, drawWidth, drawHeight);
					//返回校正图片
					//next(canvas.toDataURL("image/jpeg", .8));
					//console.log(canvas.toDataURL("image/jpeg", .8));
					//previewer.src = canvas.toDataURL("image/jpeg", .8);   //base64

					var op="";
					
					var img = new Image();
					op = canvas.toDataURL("image/jpeg", .8);
					
					fo.append('<input class="remo" type="hidden" name="imgPic" value="'+op+'"><input type="hidden" name="isPng" value="1">');
					img.src = canvas.toDataURL("image/jpeg", .8);
					//var ddiv = $("<div class='z_addImg'><div class='mm'></div></div>");
					piclook.append(img);
					//$('.z_photo').append(ddiv);
	
				}
				image.src = img;
			};
			
			/*$(".z_photo").on("singleTap",".mm",function(){
			
				var aa = $(this).parent().index()-1;
				
				$(".remo").eq(aa).remove();
				$(this).parent().remove();
			})*/
		
	</script>
</html>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             